import React, { forwardRef, useImperativeHandle, useState } from 'react'
import { message, Modal, notification } from 'antd'
import { connect } from '@umijs/max'
import { ProTable, ProTableOptions } from '@/components'
import styles from './index.less'

const BindDetail = (props, ref) => {
  const [modalVisible, setModalVisible] = useState(false)
  const [dictId, setDictId] = useState(null)
  const [forceUpdate, setForceUpdate] = useState(0)
  const [loading, setLoading] = useState(false)

  useImperativeHandle(props.refInstance, () => ({
    toggleModal,
  }))

  const columns = [
    {
      title: '表名称',
      dataIndex: 'tblName',
      key: 'tblName',
      width: '15%',
      ellipsis: true,
    },
    {
      title: '字段名称',
      dataIndex: 'fieldName',
      key: 'fieldName',
      width: '20%',
      ellipsis: true,
    },
    {
      title: '字段描述',
      dataIndex: 'fieldDes',
      key: 'fieldDes',
      width: '22%',
      ellipsis: true,
    },
    {
      title: '字段数据类型',
      dataIndex: 'dictDataType',
      key: 'dictDataType',
      width: '12%',
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'boundStatus',
      key: 'boundStatus',
      width: '15%',
      render: (status) => (
        status === 0 ? (
          <>
            <i className="iconfont icon-daiban hu-blue" />
            待绑定
          </>
        ) : (
          <>
            <i className="iconfont icon-chenggong hu-green" />
            已绑定
          </>
        )
      ),
    },
    {
      title: '操作',
      render: (record) => {
        const { boundStatus, id } = record
        return (
          <ProTableOptions>
            {
              (boundStatus === 0 || null) && <span onClick={() => { queryMaintain(id) }}>维护</span>
            }
            {
              (boundStatus === 0 || null) && <span onClick={() => { queryBound(id, 1) }}>绑定</span>
            }
            {
              (boundStatus === 1 || null) && <span onClick={() => { queryBound(id, 0) }}>取消绑定</span>
            }
          </ProTableOptions>
        )
      },
    },
  ]

  // 绑定/解绑
  const queryBound = (id, status) => {
    setLoading(true)
    props.dispatch({
      type: 'standardMap/queryBound',
      params: {
        id,
        boundStatus: status,
      },
      cb: (data) => {
        setLoading(false)
        if (data) {
          message.success('操作成功')
          // forceUpdateFn()
          props?.forceUpdateFn()
        }
      },
    })
  }

  // 维护
  const queryMaintain = (id) => {
    setLoading(true)
    props.dispatch({
      type: 'standardMap/queryMaintain',
      params: {
        id,
      },
      cb: (data) => {
        const { status, msg } = data
        setLoading(false)
        if (Number(status) === 200) {
          message.success('操作成功')
          forceUpdateFn()
        } else {
          notification.error({
            message: '服务端错误',
            description: msg || '操作失败',
          })
        }
      },
    })
  }

  const forceUpdateFn = () => {
    setForceUpdate(forceUpdate + 1)
  }

  const toggleModal = (id) => {
    setModalVisible(!modalVisible)
    setDictId(id)
  }

  const onConfirm = () => {}

  return (
    <Modal
      className={styles.bind_detail}
      title="绑定详情"
      visible={modalVisible}
      maskClosable={false}
      destroyOnClose
      // forceRender
      bodyStyle={{
        height: `${document.documentElement.clientHeight * 0.65}px`,
        overflowY: 'auto',
      }}
      width={1220}
      footer={null}
      onCancel={toggleModal}
      onOk={onConfirm}
    >
      <ProTable
        loading={loading}
        key={forceUpdate}
        rowKey={() => (Math.random())}
        columns={columns}
        url="/api/v1/mapping/detail/list"
        query={{
          dictId,
        }}
      />
    </Modal>
  )
}

const IComponent = connect(({ standardMap }) => ({ ...standardMap }))(BindDetail)

export default forwardRef((props, ref) => <IComponent {...props} refInstance={ref} />)
